<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 节点
     节点：看做对象
     对象：属性和方法
     DOM树
     获取节点（元素）：querySelector
     修改属性：
        1.自身具有属性：
            元素对象.属性
            对象.getAtrribute('属性')
            对象.setAtrribute('属性','值')
        2.自定义属性：
        对象.dataset.属性名=''
        对象.
    -->

    <!-- 绑定事件：事件监听
        1.html属性中绑定函数 
        2.DOM0对象属性绑定
        3.DOM2
    -->
    <button onclick="show()">点击1</button>
    <input type="button" value="按钮" onclick="(function(){alert('hello word')})()">
    <script>
        //函数show():弹出警告（别点我）
        function show(){
        alert('别点我');
    }
    </script>
    
    <button class="btn1">点击2</button>
    <script>
        const btn1=document.querySelector('.btn1');
        btn1.onclick=function(){
            alert('hello DOM0');
        }
    </script>

    <button class="btn2">点击3</button>
    <script>
        //1.获取节点
        const btn2=document.querySelector('.btn2');
        //2.监听事件：对象.addEventListener('事件类型'，事件处理程序，false);
        btn2.addEventListener('click',function(){
            alert('hello DOM2');
        },false)
    </script>
</body>
</html>